<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WPF/E QuickStart: the Canvas object</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type='text/javascript' src='samples/aghost.js'></script>
</head>
<body style="margin: 0">
    <table class="outer" cellpadding="0" cellspacing="0">
        <tr>
            <td width="230px" class="navigation-cell" valign="top">
              <div class="navigation-content">
                
  <div id="tocControlHost"></div>

    <script type="text/javascript" src="assets/toc.js"></script>

    <script type="text/javascript">
        // Create the WPF/E ActiveX control.
        // The technique used here enables your WPF/E content to receive
		// input before its ActiveX control is clicked.
        new agHost(
            "tocControlHost", // hostElementID (HTML element to put WPF/E
                             // ActiveX control inside of -- usually a <div>)
	        "tocControl1", // ID of the WPF/E ActiveX control we create
	        "230x", // width
	        "410px", // height
            "#00000000", //backgroundcolor
	        null, // SourceElement (name of script tag containing xaml)
	        "assets/toc.xaml", //source file
	        "true", // IsWindowless
	        "30",  // MaxFrameRate

	        null // OnError handler (method name -- no quotes)
	    );
    </script>



    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 5; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>

              </div>
            </td>
            <td width="5px">
            </td>
            <td valign="top">
                <div style="margin: 5px">
                <div class="header-section">
<table>
  <tr>
  <td><img src="images/canvasnotebook.png" /></td><td><h1>the Canvas object</h1></td>
  </tr>
</table>
</div>
 

<div class="intro-section">
<p>A <span class="api-name">Canvas</span> is an object designed to contain and
position shapes and controls. Every WPF/E XAML file has at least one <span class="api-name">Canvas</span>.
This document introduces the <span class="api-name">Canvas</span> object and describes how to add, position,
and size its child objects. This document contains the following sections.</p>
<ul>
<li><a href="#addobjects">add an object to your Canvas</a></li>
<li><a href="#positionobjects">position an object</a></li>
<li><a href="#widthandheight">controlling width and height</a></li>
<li><a href="#nestedcanvas">nested Canvas objects</a></li>
<li><a href="#whatsnext">what's next?</a></li>

</ul>
</div>


<div class="section">
<a name="addobjects"></a><h3>add an object to your Canvas</h3>
<p>A <span class="api-name">Canvas</span> contains and positions other objects. To add an object to a <span class="api-name">Canvas</span>,
insert it between the <code>&lt;Canvas&gt;</code> tags. The following example adds an <span class="api-name">Ellipse</span> object to a <span class="api-name">Canvas</span>.
Because the <span class="api-name">Canvas</span> is the root element, it
contains several namespace declarations.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for canvas-additem.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> 
     <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span>
     <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(true);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/canvas-additem.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/canvas-additem.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

<p>A <span class="api-name">Canvas</span> can contain any number of objects,
even other <span class="api-name">Canvas</span> objects. The z-order of objects
within a <span class="api-name">Canvas</span> is determined by the sequence in
which they are declared. Objects declared later appear in front of objects
declared first.</p>
</div>


<div class="section">
<a name="positionobjects"></a><h3>position an object</h3>
<p>To position an object in a <span class="api-name">Canvas</span>, you set the <span class="api-name">Canvas.Left</span>
and <span class="api-name">Canvas.Top</span> attached properties on that object.
The <span class="api-name">Canvas.Left</span> attached property specifies the
distance between an object and the left edge of its parent <span class="api-name">Canvas</span>,
and the <span class="api-name">Canvas.Top</span> attached property specifies the
distance between the child object and the top edge of its parent <span class="api-name">Canvas</span>.
The following example takes the Ellipse from the previous example and moves it
30 pixels from the left and 30 pixels from the top of the <span class="api-name">Canvas</span>. </p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for canvas-LeftTop.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> 
      <strong><span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span></strong> 
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(true);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/canvas-LeftTop.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/canvas-LeftTop.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>

<p>The following illustration highlights the
coordinate system of the <span class="api-name">Canvas</span>&nbsp;and the
position of the <span class="api-name">Ellipse</span> from the previous example.</p>
<img src="images/canvas_left_top.png" />
</div>



<div class="section">
<h3><a name="widthandheight"></a>controlling width and height</h3>
<p><span class="api-name">Canvas</span>, shapes, and many other elements have <span class="api-name">Width</span> and
<span class="api-name">Height</span> properties that enable you to specify their
size. The following
example creates an <span class="api-name">Ellipse</span> that is 200
pixels wide and 200 pixels tall. Note that
percentage sizes are not supported.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml2_hyperlink' onclick="toggleCode('xaml2','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for canvas-childWidthHeight.xaml-->
<pre id='xaml2' class='xaml'><span class='collapsedXaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
</span>  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> 
      <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> 
      <strong><span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span></strong>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span> <span class='code-blue'>/&gt;</span>

<span class='collapsedXaml'><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</span></pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag2_hyperlink' onclick="toggle_ag2()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag2_restart' onclick="restart_ag2();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag2Host">
    </div>

    <script type="text/javascript">
    var ag2visible = !(true);

    function toggle_ag2() {
        var text = "preview";
        if (ag2visible) {
            ag2visible = false;

            var element = document.getElementById("ag2Host");
            element.style.display = "none";
			element = document.getElementById("ag2_restart");
            element.style.display = "none";


            document.getElementById("ag2_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag2Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag2", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/canvas-childWidthHeight.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag2Host");
            element.style.display = "";
            ag2visible = true;
			element = document.getElementById("ag2_restart");
            element.style.display = "";
            document.getElementById("ag2_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag2() {

	            new agHost(
	                "ag2Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag2", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/canvas-childWidthHeight.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag2visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag2();
    </script>

<p>The next example shows also sets the <span class="api-name">Width</span>
and
<span class="api-name">Height</span> of the parent <span class="api-name">Canvas</span> to
200 and gives it a lime green background. </p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml3_hyperlink' onclick="toggleCode('xaml3','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for canvas-HeightWidth.xaml-->
<pre id='xaml3' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span>
   <strong><span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span></strong>
   <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> 
    <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> 
    <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span>
    <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag3_hyperlink' onclick="toggle_ag3()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag3_restart' onclick="restart_ag3();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag3Host">
    </div>

    <script type="text/javascript">
    var ag3visible = !(true);

    function toggle_ag3() {
        var text = "preview";
        if (ag3visible) {
            ag3visible = false;

            var element = document.getElementById("ag3Host");
            element.style.display = "none";
			element = document.getElementById("ag3_restart");
            element.style.display = "none";


            document.getElementById("ag3_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag3Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag3", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/canvas-HeightWidth.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag3Host");
            element.style.display = "";
            ag3visible = true;
			element = document.getElementById("ag3_restart");
            element.style.display = "";
            document.getElementById("ag3_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag3() {

	            new agHost(
	                "ag3Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag3", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/canvas-HeightWidth.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag3visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag3();
    </script>


<p>When you run the example, the lime green square is the <span class="api-name">Canvas</span> and the gray
background is the portion of the hosting ActiveX control that&#39;s not obscured by
the <span class="api-name">Canvas</span>. Notice that the <span class="api-name">
Ellipse</span> is not clipped, even though it extends past the bounds of the <span class="api-name">Canvas</span>.</p>
<p>Both <span class="api-name">Width</span> and&nbsp;
<span class="api-name">Height</span> default to zero if you don&#39;t set them.</p>
</div>

<div class="section">
<a name="nestedcanvas"></a><h3>nested Canvas objects</h3>
<p> <span class="api-name">Canvas</span> can contain other <span class="api-name">Canvas</span>
objects. The following example creates a <span class="api-name">Canvas</span> that itself
contains two other <span class="api-name">Canvas</span> objects.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml4_hyperlink' onclick="toggleCode('xaml4','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for canvas-nested.xaml-->
<pre id='xaml4' class='xaml'><strong><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span></strong>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <strong><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span></strong> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"blue"</span><span class='code-blue'>/&gt;</span>
  
  <strong><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span></strong> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"red"</span><span class='code-blue'>/&gt;</span>
<strong><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span></strong>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag4_hyperlink' onclick="toggle_ag4()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag4_restart' onclick="restart_ag4();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag4Host">
    </div>

    <script type="text/javascript">
    var ag4visible = !(true);

    function toggle_ag4() {
        var text = "preview";
        if (ag4visible) {
            ag4visible = false;

            var element = document.getElementById("ag4Host");
            element.style.display = "none";
			element = document.getElementById("ag4_restart");
            element.style.display = "none";


            document.getElementById("ag4_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag4Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag4", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/canvas-nested.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag4Host");
            element.style.display = "";
            ag4visible = true;
			element = document.getElementById("ag4_restart");
            element.style.display = "";
            document.getElementById("ag4_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag4() {

	            new agHost(
	                "ag4Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag4", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/canvas-nested.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag4visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag4();
    </script>

</div>

<div class="section">
<a name="whatsnext"></a><h3>what's next</h3>
<p> The next topic, <a href="drawing-frames.html">drawing and painting</a>,
describes how to create complex shapes and how to paint with solid colors,
gradients, and images. </p>
</div>

<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>


    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 5; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>

                </div>
            </td>
        </tr>
    </table>
</body>
</html>
